<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小餐厅 - 注册</title>
    <script src="lib/constant.js"></script>
    <script src="lib/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
        .myFormItem{
          width: 85%;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div style="width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 30px;margin-bottom:15px;">
        <h1>欢迎注册</h1>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="number" id="tele" placeholder="请输入手机号" autocomplete="off" class="layui-input" maxlength="11" minlength="11">
        </div>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" id="pass1" placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="16">
        </div>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="password" id="pass2" placeholder="请再次输入密码" autocomplete="off" class="layui-input" maxlength="16">
        </div>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" id="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" maxlength="16">
        </div>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">地址(选填)</label>
        <div class="layui-input-block">
            <input type="text" id="address" placeholder="请输入地址" autocomplete="off" class="layui-input" maxlength="50">
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button id="submit" class="layui-btn" onclick="userRegiste()" style="padding-left: 30px;padding-right: 30px;margin:auto;width: 200px;">注册</button>
    </div>
    <div class="layui-form-item" style="text-align: center;font-size: 12px;">
        <span><a href="login.html" style="color: #01AAED">已有账号？点击登录</a></span>
    </div>
</body>
<script>
    function check(tele,pass1,pass2,name) {
        if(tele.length!=11||tele.substr(0,1)!="1"){
            alert("手机号输入错误!");
            return false;
        }
        if(pass1.length<6){
            alert("密码长度至少6位!");
            return false;
        }
        if(pass2!=pass1){
            alert("两次密码输入不一致!");
            return false;
        }
        if(name==''||name==null){
            alert("请输入姓名!");
            return false;
        }
        return true;
    }

    function userRegiste() {
        let tele=$("#tele").val().trim();
        let pass1=$("#pass1").val().trim();
        let pass2=$("#pass2").val().trim();
        let name=$("#name").val().trim();
        let address=$("#address").val().trim();
        if(check(tele,pass1,pass2,name)){
            $.ajax({
                type:'post',
                url: RequestURL+"/userRegiste",
                data: {
                    "tele": tele,
                    "pwd": pass1,
                    "name": name,
                    "address": address
                },
                success: function(data) {
                    if(data.status===200){
                        alert('注册成功');
                        window.location.href="login.html";
                    }else{
                        alert(data.msg);
                    }
                }
            });
        }
    }
</script>
</html>